<template>
  <div id="app">
    <transition name="el-fade-in">
      <router-view />
    </transition>
  </div>
</template>

<script>
export default {
  name: "App",
  beforeCreate() {
    // this.$store.dispatch('getAccount')
  },
  created() {
    //这里写点事件监听
    this.$bus.$on("sendIMG", this.receiveIMG)
    this.$bus.$on("changeBlur", this.changeBlur)
    this.$bus.$on("changeColor",this.changeColor)

    let localIMG = (localStorage.getItem("backgroundIMG"))
    if (localIMG) {
      //更改CSS 样式渲染树！！！
      document.styleSheets[4].rules[12].style.backgroundImage = `url(${localIMG})`
    }

    let blur = localStorage.getItem("blur");
    if (blur) {
      document.styleSheets[4].rules[12].style.webkitFilter = `blur(${blur}px)`
    }
  },
  methods: {
    receiveIMG(imgUrl) {
      document.styleSheets[4].rules[12].style.backgroundImage = `url(${imgUrl})`
    },
    changeBlur(blur) {
      document.styleSheets[4].rules[12].style.webkitFilter = `blur(${blur}px)`
    },
    changeColor(color){
      document.styleSheets[4].rules[12].style.backgroundColor=color;
      document.styleSheets[4].rules[12].style.webkitFilter = `none`
      document.styleSheets[4].rules[12].style.backgroundImage = `none`
    }
  }
};
</script>

<style lang="less" scoped>
#app {
  // background-image:url("https://pic2.zhimg.com/v2-70119c437cff012b67f2bcc385f4180e_r.jpg?source=1940ef5c");
  background-size: cover;
  width: 100vw;
  height: 100vh;
}
</style>
